<template>
    <div style="padding: 10px">
    <!--    功能区-->
        <div style="margin: 10px 0">
            <el-button type="primary" @click="add">新增</el-button>
            <el-button type="primary">导入</el-button>
            <el-button type="primary">导出</el-button>
        </div>
    <!--    搜索区-->
        <div style="margin:10px 0">
            <el-input v-model="search" placeholder="请输入..." style="width: 20%"/>
            <el-button type="primary" style="margin-left: 5px">查询</el-button>
        </div>
        <el-scrollbar>
            <el-table :data="tableData" border stripe style="width: 100%;">
                <el-table-column prop="date" label="Date" width="140" sortable />
                <el-table-column prop="realname" label="Name" width="120" />
                <el-table-column prop="address" label="Address" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default>
                        <el-button link type="primary" size="mini" @click="handleEdit">编辑</el-button>
                        <el-popconfirm title="确认删除吗?">
                            <template #reference>
                                <el-button link size="mini" type="danger" @click="handleDelete">删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <div style="margin: 10px 0">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="10"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>

    <!--    弹出对话框  -->
    <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%">
<!--     表单组件   -->
        <el-form :model="form" label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="form.realname" style="width:80%"/>
          </el-form-item>
          <el-form-item label="日期">
            <el-input v-model="form.date" style="width:80%"/>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"  style="width:80%"/>
          </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                确认
                </el-button>
            </span>
        </template>

      </el-dialog>

</template>

<script>
    export default {
        name: 'Bills',
        data(){
            return{
                UserFilled,
                Avatar,
                CirclePlus,
                Plus,
                Upload,
                tableData,
                search: '',
                pageSize: 10,
                currentPage: 1,
                dialogVisible
            }
        },
        components: {
        },
        methods: {
            handleSizeChange(){},
            handleEdit(){},
            handleCurrentChange(){},
            handleDelete() {},
            add(){
                this.dialogVisible = true;
                this.from ={};

            }
        }
    }
    import { ref } from 'vue'
    import { UserFilled,Avatar,CirclePlus,Plus,Upload} from '@element-plus/icons-vue'
    const item = {
        date: '2016-05-02',
        realname: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }
    const tableData = ref(Array.from({ length: 20 }).fill(item))
    const dialogVisible = ref(false)
</script>

<style scoped>
span{
    text-align:left;
    /*float: left;*/
    width: 240px;
}/*.al-left{
    
    text-align: left;
}*/

.infobar{
    box-shadow: var(--el-box-shadow-dark);
    box-shadow: -3px 0 8px -4px;
    border-radius: 4px;
    background-color: aliceblue;
    width: 300px;
    height: auto;
    padding: 20px;
    padding-top: 5px;
    padding-left: 60px;
    padding-right: 60px;
    margin-right: 100px;
    margin-left: 300px;
    margin-top: 0;
    text-align:center;
    /*display: flex;*/
    justify-content: center;
}
.el-form-item{
    margin-bottom: 4px;
    margin-top: 5px;
}
a{
  color: #409eff;
  text-decoration: none;
}
</style>